<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="设备ID" prop="deviceId">
        <el-input style="width: 125px" v-model="queryParams.deviceId" placeholder="请输入设备ID" clearable @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item  label="设备名称" prop="deviceName">
        <el-input style="width: 140px" v-model="queryParams.deviceName" placeholder="请输入设备名称" clearable @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item  label="创建时间" prop="createTime">
        <el-date-picker style="width: 350px" v-model="queryParams.createTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </el-form-item>
      <el-form-item label="项目ID" prop="projectId">
        <el-input style="width: 125px" v-model="queryParams.projectId" placeholder="输入所属项目ID" clearable @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:notice:add']">新增</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="noticeList">
      <el-table-column label="设备ID" align="center" prop="deviceId" width="130" />
      <el-table-column label="设备名称" align="center" prop="deviceName" width="150"/>
      <el-table-column label="设备说明" align="center" prop="deviceIntroduce" :show-overflow-tooltip="true"/>
      <el-table-column label="所属项目ID" align="center" prop="projectId" width="130"/>
      <el-table-column label="创建时间" align="center" prop="createTime" width="120">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="更新时间" align="center" prop="createTime" width="100">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:notice:edit']">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:notice:remove']">删除</el-button>
        </template>1
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getListByDevicePage"/>
    <el-dialog title="修改信息" :visible.sync="changeMessageOpen" width="30%" center :close-on-click-modal="false">
      <div style="text-align: center">
        <form>
          <tr>
            <td>设备名称:</td>
            <td>
              <el-input style="padding: 10px;width: 300px" v-model="dialogForm.deviceName" placeholder="请输入内容"></el-input>
            </td>
          </tr>
          <tr>
            <td style="vertical-align: middle;">设备简介:</td>
            <td><el-input type="textarea" :rows="2"  maxlength="30" show-word-limit style="padding: 10px;width: 300px" v-model="dialogForm.deviceIntroduce" placeholder="请输入内容"></el-input></td>
          </tr>
          <tr>
            <td>所属项目ID:</td>
            <td><div style="text-align: center">
              <el-select style="padding: 10px;width: 300px" v-model="dialogForm.projectId"  placeholder="请选择">
                <el-option  v-for="item in dropdownForUpdateDevice" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </div></td>
          </tr>
        </form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="changeCancel">取 消</el-button>
        <el-button type="primary" @click="sureUpdateMessage">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="新增项目" :visible.sync="addDeviceOpen" width="30%" center :close-on-click-modal="false">
      <div style="text-align: center">
        <form>
          <tr>
            <td>项目名字:</td>
            <td>
              <el-input maxlength="10" show-word-limit style="padding: 10px;width: 300px" v-model="addCondition.deviceName" placeholder="请输入内容"></el-input>
            </td>
          </tr>
          <tr>
            <td style="vertical-align: middle;">项目简介:</td>
            <td><el-input type="textarea" :rows="2"  maxlength="30" show-word-limit style="padding: 10px;width: 300px" v-model="addCondition.deviceIntroduce" placeholder="请输入内容"></el-input></td>
          </tr>
          <tr>
            <td>所属项目ID:</td>
            <td><el-dropdown>
              <div style="text-align: center">
                <el-select style="padding: 10px;width: 300px" v-model="addCondition.projectId"  placeholder="请选择">
                  <el-option  v-for="item in dropdownForAddDevice" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </div>
            </el-dropdown></td>
          </tr>
        </form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="changeCancel">取 消</el-button>
        <el-button type="primary" @click="sureAddDevice">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  addDevice,
  deleteDeviceById,
  getDropdownForAddDevice, getDropdownForUpdateDevice,
  getListByDevicePage,
  updateDevice
} from "@/api/wlwsys/jintao/main";
import {parseTime} from "../../../utils/ruoyi";

export default {
  name: 'device',
  data() {
    return {
      // 选中数组
      ids: [],
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      noticeList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      changeMessageOpen: false,
      addDeviceOpen:false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        deviceId:null,
        deviceName:null,
        projectId:null,
        createTime:null
      },
      // 表单参数
      form: {
        deviceId:null,
        deviceName:null,
        projectId:null,
        deviceIntroduce:null
      },
      dialogForm:{
        deviceId:null,
        deviceName:null,
        projectId:null,
        deviceIntroduce:null
      },
      addCondition:{
        deviceName:null,
        projectId:null,
        deviceIntroduce:null
      },
      dropdownForAddDevice:[],
      dropdownForUpdateDevice:[],
      projectId1:null
    };
  },
  created() {
    this.getListByDevicePage()
  },
  methods: {
    parseTime,
    getListByDevicePage(){
      if(this.queryParams.createTime===null){
        this.queryParams.createTime = ["",""]
      }
      getListByDevicePage(this.queryParams).then(response=>{
        this.total = response.total
        this.noticeList = []
        for(var i=0;i<response.rows.length;i++){
          var temp = {
            deviceId : response.rows[i].deviceId,
            deviceName : response.rows[i].deviceName,
            deviceIntroduce: response.rows[i].deviceIntroduce,
            userId: response.rows[i].userId,
            projectId:response.rows[i].projectId,
            createTime:response.rows[i].createTime,
            updateTime:response.rows[i].updateTime,
          }
          this.noticeList.push(temp)
        }
      })
    },
    handleQuery(){
      this.getListByDevicePage()
    },
    handleAdd(){
      this.addCondition = {}
      this.addDeviceOpen = true
      this.getDropdownForAddDevice()
    },
    handleUpdate(result){
      this.dialogForm.deviceId = result.deviceId
      this.dialogForm.deviceName=result.deviceName
      this.dialogForm.deviceIntroduce=result.deviceIntroduce
      this.dialogForm.projectId=result.projectId
      this.projectId1 = result.projectId
      this.changeMessageOpen = true
      this.getDropdownForUpdateDevice()
    },
    handleDelete(result){
      this.$confirm('此操作将永久删除该设备, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteDeviceById(result.deviceId).then(response=>{
          this.getListByDevicePage()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    changeCancel(){
      this.changeMessageOpen = false
      this.addDeviceOpen = false
      this.addCondition = {}
    },
    sureUpdateMessage(){
      this.form = this.dialogForm
      updateDevice(this.form).then(response=>{
        this.getListByDevicePage()
        this.form = {}
        if (response===true){
          this.$message({
            type: 'success',
            message: '修改成功'
          });
        }else {
          this.$message({
            type: 'warning',
            message: '修改失败，请稍后再试'
          });
        }
      })
      this.changeMessageOpen = false
    },
    sureAddDevice(){
      addDevice(this.addCondition).then(response=>{
        this.getListByDevicePage()
      })
      this.addDeviceOpen = false
    },
    getDropdownForAddDevice(){
      getDropdownForAddDevice().then(response=>{
        this.dropdownForAddDevice = []
        if(response!=null){
          for(var i=0; i<response.length;i++){
            const p = {
              value:response[i],
              label:response[i]
            }
            this.dropdownForAddDevice.push(p);
          }
        }
      })
    },
    getDropdownForUpdateDevice(){
      getDropdownForUpdateDevice(this.projectId1).then(response=>{
        this.dropdownForUpdateDevice = []
        if(response!=null){
          for(var i=0; i<response.length;i++){
            const p = {
              value:response[i],
              label:response[i]
            }
            this.dropdownForUpdateDevice.push(p);
          }
        }
      })
    },
  }
};
</script>

<style>
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>



